import { useMemo } from 'react'
import { Tabs } from 'antd'
import Layout from './Layout'
import styles from './index.module.less'

const { TabPane } = Tabs

const DataEntry = ({ configs, value = {}, onChange }) => {
  const tabOpts = useMemo(() => {
    return Object.entries(configs).map(([key, { label, options }]) => ({
      key,
      tab: label,
      options
    }))
  }, [configs])

  const onDataEntryChange = (key, layoutValue) => {
    const newValue = {
      ...value,
      [key]: layoutValue
    }
    onChange(newValue)
  }

  return (
    <div className={styles['data-entry']}>
      <Tabs tabPosition="left" type="card">
        {tabOpts.map(({ tab, key, options }) => (
          <TabPane tab={tab} key={key}>
            <div className={styles.layout}>
              <Layout
                options={options}
                value={value[key]}
                rootValue={value}
                onChange={(value) => onDataEntryChange(key, value)}
              />
            </div>
          </TabPane>
        ))}
      </Tabs>
    </div>
  )
}

export default DataEntry
